<template>
  <div class="MainBody">
    <div class="MainContent">
      <el-header
        >{{ classname }}
        <span style="float: right">{{ username }}</span>
      </el-header>
      <el-container style="height: 100vh; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']">
            <el-menu-item index="1" @click="value = 0"
              ><i class="el-icon-s-order"></i>成员列表</el-menu-item
            >

            <el-submenu index="2">
              <template slot="title"
                ><i class="el-icon-s-check"></i>成员导入</template
              >
              <el-menu-item-group>
                <el-menu-item index="2-1" @click="value = 1"
                  ><i class="el-icon-edit-outline"></i>选择导入</el-menu-item
                >
                <el-menu-item index="2-2" @click="fileImport()"
                  ><i class="el-icon-folder-add"></i>文件导入</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title"
                ><i class="el-icon-bottom"></i>分数导出</template
              >
              <el-menu-item-group>
                <el-menu-item index="3-1" @click="outputAll()"
                  ><i class="el-icon-document-remove"></i>导出总分数</el-menu-item
                >
                <el-menu-item index="3-2" @click="outputDetail()"
                  ><i class="el-icon-document"></i>导出分数明细</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="4" @click="initialization()"
              ><i class="el-icon-reading"></i>分数初始化</el-menu-item
            >
            <el-button
              type="danger"
              @click="deleteclass()"
              class="delete-button"
              >删除班级</el-button
            >
          </el-menu>
        </el-aside>

        <el-container>
          <el-main class="Main">
            <div v-if="value === 0">
              <classMemberList></classMemberList>
            </div>

            <div v-if="value === 1">
              <SelectImport></SelectImport>
            </div>
            <div v-if="value === 2">
              <ScoreUpdate></ScoreUpdate>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
  
  <script>
import axios from "axios";
import ClasMemberList_list from "./comps/ClasMemberList_list.vue";
import SelectImport from "./SelectImport.vue";
export default {
  data() {
    const item = {};
    return {
      value: 0,
      // tableData: Array(20).fill(item),
      username: localStorage.getItem("chname"),
      classname: this.$route.params.titlename,
    };
  },
  components: {
    classMemberList: ClasMemberList_list,
    SelectImport,
  },
  methods: {
    deleteclass() {
      this.$confirm("此操作将永久删除该班级, 是否继续?", {
        type: "warning",
      })
        .then(() => {
          axios.delete("/class/deleteClass?classId=" + this.$route.params.id)
            .then((response) => {
              this.$message.success("成功");
              this.$router.push("/class");
            });
        })
        .catch(() => {
          this.$message.error("删除失败")
        });
    },
    fileImport() {
      const input = document.createElement("input");
      input.type = "file";
      input.enctype = "multipart/form-data";
      input.click();

      input.addEventListener("change", function () {
        // 处理选择文件后的逻辑
        // 创建一个 FormData 对象
        const file = new FormData();
        file.append("file", input.files[0]); // 将文件添加到 file 中
        axios
          .post("/class/importbyex", file, {
            Headers: {
              "Content-Type": "application/octet-stream",
            },
          })
          .then((response) => {
            if (response.data.code==200) {
              console.log(response.data);
              alert("导入成功！");
            } else {
              alert("导入失败！,请检查文件格式或者查看学生是否已注册");
            }
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
    outputAll() {
      this.$dialog
        .confirm({
          title: "导出总分数",
          message: "确定导出总分数吗？",
        })
        .then(() => {
          axios
            .get("/scores/exportData?classId=" + this.$route.params.id, {
              responseType: "blob", // 设置响应类型为 blob
            })
            .then((response) => {
              const url = window.URL.createObjectURL(new Blob([response.data]));
              const link = document.createElement("a");
              link.href = url;
              link.setAttribute(
                "download",
                this.$route.params.titlename + "总分数.xlsx"
              ); // 设置文件名
              document.body.appendChild(link);
              link.click();
              window.URL.revokeObjectURL(url); // 释放 URL 对象
              document.body.removeChild(link);
            });
        }).catch(() => {
          console.log("取消！");
        });
    },
    outputDetail() {
      this.$dialog
        .confirm({
          title: "导出详细分数",
          message: "确定导出详细分数吗？",
        })
        .then(() => {
          axios.get("/scores/exportDataDetails?classId=" + this.$route.params.id, {
          responseType: "blob", // 设置响应类型为 blob
        })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute(
            "download",
            this.$route.params.titlename + "分数明细.xlsx"
          ); // 设置文件名
          document.body.appendChild(link);
          link.click();
          window.URL.revokeObjectURL(url); // 释放 URL 对象
          document.body.removeChild(link);
        });
        }).catch(() => {
          console.log("取消！");
        })

    },

    initialization() {
      this.$dialog
        .confirm({
          title: "初始化分数",
          message: "初始化分数会清空所有成员的分数，确定初始化吗吗？",
        })
        .then(() => {
          // console.log(this.$store.state.course_id);
          // console.log(parseInt(this.$route.params.id));
          if(this.$store.state.course_id==0){
            this.$message.error("请先选择课程！");
          }else{
          axios
            .post(
              "/class/importGradeStudent?classId=" +
                parseInt(this.$route.params.id) +
                "&courseId=" +
                this.$store.state.course_id
            )
            .then((response) => {
              this.$message.success("初始化成功！");
            }).catch((error) => {
              this.$message.error("初始化失败，检查班级是否添加到课程中");
            })
            ;
    }})
        .catch(() => {
          // console.log(777);
        });
    },
  },
};
</script>
  
  <style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.MainBody {
  display: flex;
}
.MainContent {
  flex: 8;
  margin: 0 10%;
}
.Main {
  padding: 0;
}
.delete-button {
  margin-top: 10px;
  width: 100%;
}
</style>
  
  